<template>
  <div id="third">
    <div class="pd_20 bg_white">
      <el-row :gutter="20">
        <el-col :span="5" class="el-name">病案信息：</el-col>
        <el-col :span="5" class="el-name">随访类型：</el-col>
        <el-col :span="5" class="el-name">随访小组：</el-col>
        <el-col :span="7" class="el-name">随访时间：</el-col>
      </el-row>
      <el-row :gutter="20" class="el_t_10">
        <el-col :span="5">
          <el-input type="text" size="mini" placeholder="输入门诊号 / 姓名 / 电话进行查询"></el-input>
        </el-col>
        <el-col :span="5">
          <el-select v-model="search.name" size="mini" placeholder="请选择随访类型" class="el_long">
            <el-option label="请选择随访类型" :value="1"></el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-select v-model="search.name" size="mini" placeholder="请选择随访小组" class="el_long">
            <el-option label="请选择随访小组" :value="1"></el-option>
          </el-select>
        </el-col>
        <el-col :span="7">
          <el-date-picker
            size="mini"
            class="el_long"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" size="mini" plain>搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="content el_t_20">
      <el-table :data="list" :header-row-class-name="'table_header'" :height="list.length>0?360:110"
                :empty-text="'系统未检索到相关结果…'">
        <el-table-column prop="no" label="门诊/登记号" width="120"></el-table-column>
        <el-table-column prop="name" label="姓名" width="80"></el-table-column>
        <el-table-column prop="name" label="随访类型" width="80"></el-table-column>
        <el-table-column prop="phone" label="电话" width="150"></el-table-column>
        <el-table-column prop="time" label="计划随访日期" width="200"></el-table-column>
        <el-table-column prop="name" label="随访人"></el-table-column>
        <el-table-column prop="name" label="小组"></el-table-column>
        <el-table-column prop="name" label="创建日期"></el-table-column>
        <el-table-column prop="name" label="操作" fixed="right" width="180">
          <template slot-scope="data">
            <el-button type="primary" plain size="mini" @click="">查看/编辑</el-button>
            <el-button type="primary" plain size="mini" @click="">随访</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="text-right el_t_20 page_box" v-if="list.length > 0">
        <el-pagination
          :current-page="1"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "third",
    data() {
      return {
        search: {
          name: ''
        },
        list: [{
          name: '胡忠信',
          sex: '男',
          birthday: '1956-12-10',
          no: '1812100102',
          phone: '15645541321',
          time: '2018-12-10 14:23:32',
          remark: '睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍'
        }, {
          name: '胡忠信',
          sex: '男',
          birthday: '1956-12-10',
          no: '1812100102',
          phone: '15645541321',
          time: '2018-12-10 14:23:32',
          remark: '睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍'
        }, {
          name: '胡忠信',
          sex: '男',
          birthday: '1956-12-10',
          no: '1812100102',
          phone: '15645541321',
          time: '2018-12-10 14:23:32',
          remark: '睡眠障碍'
        }, {
          name: '胡忠信',
          sex: '男',
          birthday: '1956-12-10',
          no: '1812100102',
          phone: '15645541321',
          time: '2018-12-10 14:23:32',
          remark: '睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍'
        }, {
          name: '胡忠信',
          sex: '男',
          birthday: '1956-12-10',
          no: '1812100102',
          phone: '15645541321',
          time: '2018-12-10 14:23:32',
          remark: '睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍'
        },]
      }
    },
  }
</script>

<style scoped>
  .content {
    margin-top: 10px;
    height: calc(100vh - 250px);
    background: #ffffff;
    position: relative;
    padding: 20px;
  }
</style>
